<template>
  <div>
    <div>
      <template>
        <el-carousel :interval="3000" type="card" arrow="always">
          <el-carousel-item v-for="(videoData,index) in this.videoData.slice(0,4)" :key="index">
            <img :src="videoData['video_img']" alt="404"  @click="toPlayer(index)">
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <div style="margin: 20px">
      <h3 style="margin: 20px 20px 20px 10px; height: 33px; line-height: 33px; font-size: 24px; color: #333">全部视频</h3>
      <div style="height: 27px">
        <div style="float: left;width: 273px;">
          <el-link :underline="false" class="divStyle">全部</el-link>
          <el-link :underline="false" class="divStyle">地板舞</el-link>
          <el-link :underline="false" class="divStyle">震感舞</el-link>
        </div>
        <div style="float: right;">
          <el-link :underline="false" class="divStyle">综合</el-link>
          <el-link :underline="false" class="divStyle">最新</el-link>
          <el-link :underline="false" class="divStyle">热门</el-link>
        </div>
      </div>
    </div>
    <div>
      <el-row :gutter="30" type="flex" class="card_flex">
        <el-col :span="25" v-for="(nowPageData, index) in this.nowPageData" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="nowPageData['video_img']" class="card_img" alt="404" @click="toPlayer(index)">
            <div class="el_card_footer_sty">
              <span class="el_card_footer_span_sty">{{ nowPageData['video_title'] }}</span>
              <div class="bottom clearfix">
                <time class="time el_card_footer_span_sty">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="size"
        :this.current="current"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import VideoPlay from "./videoPlay.vue";
export default {
  components: {VideoPlay},
  props:['searchInput'],
  data() {
    return {
      currentDate: new Date().toLocaleDateString(),
      total:0,
      current:1,
      size:30,
      nowPageData:[],
      videoData:[],
    }
  },
  mounted() {
    this.getVideoInfo()
  },
  methods: {
    getVideoInfo() {
      this.$axios.get('api/video/info/',{
        params:{searchInput:this.searchInput}
      }).then((response)=>{
        const res = response.data
        if (res['respCode']==='000000'){
          this.videoData = res['list']
          this.total = this.videoData.length
          this.nowPageData = this.videoData.slice((this.current-1)*this.size,this.current*this.size)
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    //页码切换的钩子
    handleCurrentChange(val) {
      this.current = val
      this.getVideoInfo()
      console.log(`当前页: ${val}`);
    },
    //路由传参跳转player
    toPlayer(index){
      this.$router.push({path:'/shiPin/player',query:{url:this.videoData[index]['video_path'],img:this.videoData[index]['video_img'],video_id:this.videoData[index]['id']}})
    },
  }
}
</script>

<style scoped>
.el-col-25{
  width: 20%;
}
.divStyle{
  height: 17px;
  font-size: 12px;
  color: #666;
  margin: 0 12px 12px;
  line-height: 17px;
}
.button {
  padding: 0;
  float: right;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.time {
  font-size: 13px;
  color: #999;
}
.el-card {
  margin-bottom: 20px;
  border-radius: 20px;
}
.pagination {
  margin: 40px;
  text-align: center;
}
.card_flex {
  flex-wrap: wrap;
  flex-direction: row;
}
.el_card_footer_sty {
  background: black;
  padding: 14px;
}
.el_card_footer_span_sty {
  color: white;
  font-size: 10px;
}
.card_img {
  width: 100%;
  height: 240px;
}
</style>
